<template>
  <div>
    <head-text titleText="我的流程"></head-text>
    <div class="tabs_contents">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我的" name="first">
          <allProcess
            :tableData="tableData"
            :tableListData="allListData"
            :currentData="currentData"
            :tableBtn="tableBtn"
            @handleDeTail="handleDeTail"
            @handleDelete="handleDelete"
            @handlePageChange="handlePageChange"
            @handleSizeChange="handleSizeChange"
          ></allProcess>
        </el-tab-pane>
          <el-tab-pane  name="listTodo" class="listTodo">
            <span slot="label">待办<el-badge :value="todoListBadge" class="item"></el-badge></span>
            <allProcess
              :tableData="tableData"
              :tableListData="todoListData"
              :currentData="currentData"
              :tableBtn="tableBtn"
              @handleDeTail="handleDeTail"
              @handleDelete="handleDelete"
              @handlePageChange="handlePageChange"
              @handleSizeChange="handleSizeChange"
            ></allProcess>
          </el-tab-pane>
        <el-tab-pane label="已办" name="listDone">
          <allProcess
            :tableData="tableData"
            :tableListData="doneListData"
            :currentData="currentData"
            :tableBtn="tableBtn"
            @handleDeTail="handleDeTail"
            @handleDelete="handleDelete"
            @handlePageChange="handlePageChange"
            @handleSizeChange="handleSizeChange"
          ></allProcess
        ></el-tab-pane>
        <!-- <el-tab-pane label="已退回" name="fourth">已退回</el-tab-pane> -->
      </el-tabs>
    </div>
    <detail-process
      :detailData.sync="detailData"
      :visibleShow.sync="visibleShow"
      @CloseDetail="CloseDetail"
      @DetailCancel="DetailCancel"
      @DetailExamine="DetailExamine"
      :activeName.sync="activeName"
      :processImageUrl.sync="processImageUrl"
    ></detail-process>
  </div>
</template>

<script>
import headText from "@c/headText";
import allProcess from "./allProcess.vue";
import detailProcess from "./dialogCom.vue";
import {
  processInstanceURLApi,
  processTodoURLApi,
  processDoneURLApi,
  processImageURL,
  processCompleteURLApi,
  processDeleteURLApi,
  processtodoListURLApi,
} from "@s/api";
export default {
  components: {
    headText,
    allProcess,
    detailProcess,
  },
  data() {
    return {
      activeName: "listTodo",
      tableData: [],
      currentData: {},
      pageNo: 1,
      pageSize: 10,
      detailData: {},
      visibleShow: false,
      taskId: "",
      processImageUrl: "",
      todoListBadge: 0
    };
  },
  created() {
    this.allListData = [
      { prop: "name", width: "", label: "标题" },
      { prop: "processDefinitionName", width: "", label: "流程类型" },
      { prop: "startUserName", width: "", label: "发起人" },
      { prop: "startTime", width: "", type: "date", label: "发起时间" },
      { prop: "endTime", width: "", type: "date", label: "结束时间" },
      { prop: "transactor", width: "", label: "当前办理人" },
      { label: "操作", type: "btn", width: "150", fixed: "right" },
    ];
    this.todoListData = [
      { prop: "processInstanceName", width: "", label: "标题" },
      { prop: "name", width: "", label: "任务类型" },
      { prop: "startUserName", width: "", label: "发起人" },
      { prop: "startTime", width: "", type: "date", label: "流程发起时间" },
      { prop: "assigneeName", width: "", label: "办理人" },
      { prop: "createTime", width: "", type: "date", label: "任务创建时间" },
      { label: "操作", type: "btn", width: "150", fixed: "right" }
    ];
    this.doneListData = [
      { prop: "processInstanceName", width: "", label: "标题" },
      { prop: "name", width: "", label: "任务类型" },
      { prop: "startUserName", width: "", label: "发起人" },
      { prop: "startTime", width: "", type: "date", label: "流程发起时间" },
      { prop: "createTime", width: "", type: "date", label: "任务创建时间" },
      { prop: "endTime", width: "", type: "date", label: "任务完成时间" },
      { label: "操作", type: "btn", width: "150", fixed: "right" }
    ];
    this.tableBtn = [
      {
        name: "查看详情",
        btnType: "primary",
        handleFn: "handlLookDetail",
      },
    ];
  },
  mounted() {
    // 查询待办流程
    this.getProcessTodo();
  },
  methods: {
    // 切换tabs
    handleClick(tab, event) {
      this.activeName = tab.name;
      if (tab.name === "first") {
        this.getProcessInstance();
      } else if (tab.name === "listTodo") {
        this.getProcessTodo();
      } else if (tab.name === "listDone") {
        this.getProcessDone();
      }
    },
    // 查询我的全部流程
    getProcessInstance() {
      processInstanceURLApi({
        current: this.pageNo,
        size: this.pageSize,
        startedByMe: true,
      }).then((res) => {
        this.tableData = res.records;
        this.currentData.total = res.total;
      });
    },
    // 查询待办流程
    getProcessTodo() {
      processTodoURLApi({
        current: this.pageNo,
        size: this.pageSize,
      }).then((res) => {
        this.tableData = res.records;
        this.currentData.total = res.total;
        this.todoListBadge = res.total;
      });
    },
    // 查询已完成流程
    getProcessDone() {
      processDoneURLApi({
        current: this.pageNo,
        size: this.pageSize,
      }).then((res) => {
        this.tableData = res.records;
        this.currentData.total = res.total;
      });
    },
    // 审批流程
    getProcessComplete(json) {
      processCompleteURLApi(json).then((res) => {
        if (this.activeName === "first") {
          this.getProcessInstance();
        } else if (this.activeName === "listTodo") {
          this.getProcessTodo();
        } else if (this.activeName === "listDone") {
          this.getProcessDone();
        }
        this.$message({
          type: "success",
          message: "审批成功！"
        });
      });
    },
    // 查看详情processCompleteURLApi
    handleDeTail(row) {
      this.visibleShow = true;
      this.detailData = row.values;
      if (this.activeName === "first") {
        this.processImageUrl = processImageURL + row.id;
      } else {
        this.processImageUrl = processImageURL + row.processInstanceId;
      }
      this.taskId = row.id;
    },
    // 删除
    handleDelete(row) {
      if (this.activeName === "first") {
        processDeleteURLApi({ processInstanceId: row.id });
        this.getProcessInstance();
      } else {
        processtodoListURLApi({ taskId: row.id });
      }
    },
    // 关闭详情
    CloseDetail() {
      this.visibleShow = false;
    },
    // 退回流程
    DetailCancel() {
      this.$confirm("此操作将退回该流程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.CloseDetail();
      });
    },
    // 审批流程
    DetailExamine() {
      this.$confirm("此操作将通过该流程?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.CloseDetail();
        this.getProcessComplete({ taskId: this.taskId });
      });
    },
    handlePageChange(val) {
      this.pageNo = val;
      this.getProcessInstance();
    },
    handleSizeChange(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.getProcessInstance();
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs_contents {
  padding: 50px;
}
</style>
